<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表渲染</title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<!--
		v-for指令
		1.用于展示列表数据
		2.语法:v-for="(item,index) in xxx" :key="yyy"
		3.可遍历:数组、对象、字符串、指定次数
		
		上面的:key值非常关键,可影响Vue在对真实DOM和虚拟DOM的比较过程,如果使用默认索引或不写索引时从数组头部插入数据可导致数据错乱
		
		
		准备好一个容器
		-->
		<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表</h2>
			<ul>
				<li v-for="(p,index) of persons" :key="index">
				{{p.name}}-{{p.age}}
				</li>
			</ul>
			<!-- 遍历对象 -->
			<h2>汽车信息</h2>
			<ul>
				<li v-for="(val,key) of car" :key="key">
				{{key}}-{{val}}
				</li>
			</ul>
			<!-- 遍历字符串 -->
			<h2>测试遍历字符串</h2>
			<ul>
				<li v-for="(char,idx) of str" :key="idx">
				{{char}}-{{idx}}
				</li>
			</ul>
			<!-- 遍历指定次数 -->
			<h2>测试遍历指定次数</h2>
			<ul>
				<li v-for="(num,idx) of 3" :key="idx">
				{{idx}}-{{num}}
				</li>
			</ul>
		</div>
		<script>
			Vue.config.productionTip = false;
			const vm = new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001','name':'张三',age:18},
						{id:'002','name':'李四',age:19},
						{id:'003','name':'王五',age:20}
					],
					car:{
						name:"奔驰A5",
						price:'80万',
						color:'白色'
					},
					str:'abcde'
				}
			});
		</script>
	</body>
</html>